/**
 * Created by 69466 on 2022/05/28.
 */
import React, {Component} from 'react';
import {StyleSheet} from 'react-native';
import {
  Button,
  Dialog,
  Text,
  View,
  RadioButton,
  RadioGroup,
} from 'react-native-ui-lib';
import {isIPhoneX} from '../../../configs/platform';
import {commonStyles} from '../../../configs/commonStyle';

export default class ConfirmDialog extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      data: {},
      content: '',
      showHeader: true,
      isDance: 1,
    };
  }

  show = (content, title = '提示') => {
    this.setState({isOpen: true, title, content});
  };

  dismiss = () => {
    this.setState({isOpen: false});
  };

  renderPannableHeader = props => {
    const {title} = props;
    return (
      <View>
        <View margin-10 center>
          <Text style={{...commonStyles.text_black_18}}>{title}</Text>
        </View>
        <View height={1} bg-line />
      </View>
    );
  };

  render() {
    const {isOpen, showHeader, title} = this.state;
    const renderPannableHeader = showHeader
      ? this.renderPannableHeader
      : undefined;
    return (
      <Dialog
        migrate
        useSafeArea
        containerStyle={styles.roundedDialog}
        visible={isOpen}
        width={'70%'}
        onDismiss={this.dismiss}
        renderPannableHeader={renderPannableHeader}
        pannableHeaderProps={{title}}>
        <View padding-10>
          {this.state.content && (
            <Text style={styles.content}>{this.state.content}</Text>
          )}
        </View>
        <RadioGroup
          style={styles.container}
          initialValue={this.state.isDance}
          onValueChange={value => {
            this.setState({isDance: value});
          }}>
          <RadioButton value={1} label={'是'} />
          <RadioButton value={0} label={'否'} />
        </RadioGroup>
        <View row style={{borderTopColor: '#eeeeee', borderTopWidth: 1}}>
          <Button
            flex
            background-white
            labelStyle={{color: '#666666'}}
            text14
            label={'取消'}
            onPress={() => {
              this.dismiss();
              this.props.cancalClick && this.props.cancalClick();
            }}
          />

          <View style={{backgroundColor: '#eeeeee', width: 1}} />
          <Button
            flex
            label={'确定'}
            background-white
            labelStyle={{color: '#F9D63B'}}
            text14
            onPress={() => {
              this.dismiss();
              this.props.callBack && this.props.callBack(this.state.isDance);
            }}
          />
        </View>
      </Dialog>
    );
  }
}

const styles = StyleSheet.create({
  roundedDialog: {
    backgroundColor: 'white',
    marginBottom: isIPhoneX ? 0 : 20,
    borderRadius: 4,
  },
  content: {
    fontSize: 14,
    color: '#141414',
    lineHeight: 25,
    minHeight: 30,
    textAlign: 'center',
  },
  container: {
    display: 'flex',
    alignItems: 'center',
    justifyContent:"space-around",
    flexDirection: 'row',
    height: 50
  }
});
